import type {ComponentConfig} from "@/lib/types"

export function generateNavigationComponent(config: ComponentConfig): string {
    const {name, description, features} = config

    // 检查是否启用了特定功能
    const hasResponsive = features.some((f) => f.id === "responsive" && f.enabled)
    const hasDarkMode = features.some((f) => f.id === "darkMode" && f.enabled)

    return `<script setup lang="ts">
import { ref } from 'vue';

/**
 * ${description || `${name} 导航组件`}
 */
interface MenuItem {
  id: string;
  label: string;
  icon?: string;
  href?: string;
  children?: MenuItem[];
}

interface Props {
  title?: string;
  items?: MenuItem[];
  ${hasDarkMode ? "darkMode?: boolean;" : ""}
}

const props = withDefaults(defineProps<Props>(), {
  title: '应用名称',
  ${hasDarkMode ? "darkMode: false," : ""}
  items: () => [
    {
      id: 'dashboard',
      label: '仪表盘',
      icon: 'home',
      href: '/dashboard'
    },
    {
      id: 'users',
      label: '用户管理',
      icon: 'users',
      children: [
        {
          id: 'users-list',
          label: '用户列表',
          href: '/users'
        },
        {
          id: 'users-create',
          label: '创建用户',
          href: '/users/create'
        }
      ]
    },
    {
      id: 'settings',
      label: '设置',
      icon: 'settings',
      href: '/settings'
    }
  ]
});

${
        hasResponsive
            ? `const isMobileMenuOpen = ref(false);

const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value;
};`
            : ""
    }

const expandedItems = ref<Set<string>>(new Set());

const toggleExpandItem = (itemId: string) => {
  if (expandedItems.value.has(itemId)) {
    expandedItems.value.delete(itemId);
  } else {
    expandedItems.value.add(itemId);
  }
};

const isExpanded = (itemId: string): boolean => {
  return expandedItems.value.has(itemId);
};

// 图标映射
const getIcon = (iconName?: string) => {
  const icons: Record<string, string> = {
    home: '<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />',
    users: '<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />',
    settings: '<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />',
    chevronDown: '<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />',
    menu: '<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />'
  };
  
  return iconName && icons[iconName] ? icons[iconName] : '';
};
</script>

<template>
  <div :class="${hasDarkMode ? "props.darkMode ? 'bg-gray-900 text-white' : 'bg-white text-gray-900'" : ""}">
    ${
        hasResponsive
            ? `<!-- 移动端导航栏 -->
    <div class="shadow-sm lg:hidden" :class="${hasDarkMode ? "props.darkMode ? 'bg-gray-800' : 'bg-white'" : "'bg-white'"}">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex">
            <div class="flex-shrink-0 flex items-center">
              <h1 class="text-xl font-bold" :class="${hasDarkMode ? "props.darkMode ? 'text-white' : 'text-gray-900'" : "'text-gray-900'"}">{{ title }}</h1>
            </div>
          </div>
          <div class="flex items-center">
            <button 
              @click="toggleMobileMenu"
              class="inline-flex items-center justify-center p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary"
              :class="${hasDarkMode ? "props.darkMode ? 'text-gray-400 hover:text-white hover:bg-gray-700' : 'text-gray-400 hover:text-gray-500 hover:bg-gray-100'" : "'text-gray-400 hover:text-gray-500 hover:bg-gray-100'"}"
            >
              <span class="sr-only">打开菜单</span>
              <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true" v-html="getIcon('menu')"></svg>
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div class="lg:hidden" v-show="isMobileMenuOpen" :class="${hasDarkMode ? "props.darkMode ? 'bg-gray-800' : 'bg-white'" : "'bg-white'"}">
      <div class="pt-2 pb-3 space-y-1">
        <template v-for="item in items" :key="item.id">
          <template v-if="item.children">
            <div>
              <button 
                @click="toggleExpandItem(item.id)"
                class="w-full flex items-center px-3 py-2 text-base font-medium"
                :class="${hasDarkMode ? "props.darkMode ? 'text-gray-300 hover:bg-gray-700 hover:text-white' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'" : "'text-gray-600 hover:bg-gray-50 hover:text-gray-900'"}"
              >
                <svg v-if="item.icon" class="mr-3 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" v-html="getIcon(item.icon)"></svg>
                <span>{{ item.label }}</span>
                <svg class="ml-auto h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" :class="{ 'transform rotate-180': isExpanded(item.id) }" v-html="getIcon('chevronDown')"></svg>
              </button>
              <div v-show="isExpanded(item.id)" class="mt-1 space-y-1 pl-8">
                <a 
                  v-for="child in item.children" 
                  :key="child.id" 
                  :href="child.href"
                  class="block px-3 py-2 text-base font-medium"
                  :class="${hasDarkMode ? "props.darkMode ? 'text-gray-400 hover:bg-gray-700 hover:text-white' : 'text-gray-500 hover:bg-gray-50 hover:text-gray-900'" : "'text-gray-500 hover:bg-gray-50 hover:text-gray-900'"}"
                >
                  {{ child.label }}
                </a>
              </div>
            </div>
          </template>
          <template v-else>
            <a 
              :href="item.href"
              class="flex items-center px-3 py-2 text-base font-medium"
              :class="${hasDarkMode ? "props.darkMode ? 'text-gray-300 hover:bg-gray-700 hover:text-white' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'" : "'text-gray-600 hover:bg-gray-50 hover:text-gray-900'"}"
            >
              <svg v-if="item.icon" class="mr-3 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" v-html="getIcon(item.icon)"></svg>
              {{ item.label }}
            </a>
          </template>
        </template>
      </div>
    </div>`
            : ""
    }
    
    <!-- 桌面端侧边栏 -->
    <div class="hidden lg:flex lg:flex-col lg:w-64 lg:fixed lg:inset-y-0 lg:border-r lg:border-gray-200" :class="${hasDarkMode ? "props.darkMode ? 'bg-gray-800 border-gray-700' : 'bg-white'" : "'bg-white'"}">
      <div class="flex items-center h-16 flex-shrink-0 px-4">
        <h1 class="text-xl font-bold" :class="${hasDarkMode ? "props.darkMode ? 'text-white' : 'text-gray-900'" : "'text-gray-900'"}">{{ title }}</h1>
      </div>
      <div class="flex-1 flex flex-col overflow-y-auto">
        <nav class="flex-1 px-2 py-4 space-y-1">
          <template v-for="item in items" :key="item.id">
            <template v-if="item.children">
              <div>
                <button 
                  @click="toggleExpandItem(item.id)"
                  class="w-full flex items-center px-3 py-2 text-sm font-medium rounded-md"
                  :class="${hasDarkMode ? "props.darkMode ? 'text-gray-300 hover:bg-gray-700 hover:text-white' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'" : "'text-gray-600 hover:bg-gray-50 hover:text-gray-900'"}"
                >
                  <svg v-if="item.icon" class="mr-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" v-html="getIcon(item.icon)"></svg>
                  <span>{{ item.label }}</span>
                  <svg class="ml-auto h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" :class="{ 'transform rotate-180': isExpanded(item.id) }" v-html="getIcon('chevronDown')"></svg>
                </button>
                <div v-show="isExpanded(item.id)" class="mt-1 space-y-1 pl-8">
                  <a 
                    v-for="child in item.children" 
                    :key="child.id" 
                    :href="child.href"
                    class="block px-3 py-2 text-sm font-medium rounded-md"
                    :class="${hasDarkMode ? "props.darkMode ? 'text-gray-400 hover:bg-gray-700 hover:text-white' : 'text-gray-500 hover:bg-gray-50 hover:text-gray-900'" : "'text-gray-500 hover:bg-gray-50 hover:text-gray-900'"}"
                  >
                    {{ child.label }}
                  </a>
                </div>
              </div>
            </template>
            <template v-else>
              <a 
                :href="item.href"
                class="flex items-center px-3 py-2 text-sm font-medium rounded-md"
                :class="${hasDarkMode ? "props.darkMode ? 'text-gray-300 hover:bg-gray-700 hover:text-white' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'" : "'text-gray-600 hover:bg-gray-50 hover:text-gray-900'"}"
              >
                <svg v-if="item.icon" class="mr-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" v-html="getIcon(item.icon)"></svg>
                {{ item.label }}
              </a>
            </template>
          </template>
        </nav>
      </div>
    </div>
    
    <!-- 主内容区 -->
    <div class="lg:pl-64">
      <slot></slot>
    </div>
  </div>
</template>`
}
